<template>
<!-- 发布货源 -->
  <div>
    <div id="cardhgth">
      <Card>
        <!-- <div slot="title">
          <div style="display: flex; justify-content: space-between">
            <div class="edit-head">
              <a @click="goBack" class="back-title">
                <Icon type="ios-arrow-back" />返回
              </a>
            </div>
            <div>发布货源</div>
          </div>
        </div> -->
        <div class="fontsizTile">
          温馨提示：带 *
          号的为必填选项，货源信息填写越详细，越方便司机查看，可以提高货物与司机以及车辆的匹配率。
        </div>
        <Row>
          <div style="overflow: hidden">
            <Form
              ref="formValidate"
              :model="formItem"
              :label-width="120"
              inline
              size="small"
              :rules="ruleValidate"
            >
              <Col span="24">
                <FormItem
                  style="margin-left: 0px"
                  label="发货公司"
                  prop="companyUserId"
                >
                  <Select
                    @on-change="companySelect"
                    :clearable="false"
                    filterable
                    v-model="formItem.companyUserId"
                    style="width: 210px"
                  >
                    <Option
                      v-for="(item, index) in companyList"
                      :key="index"
                      :value="item.userId"
                      >{{ item.companyName }}</Option
                    >
                  </Select>
                </FormItem>
              </Col>
              <Col span="24" style="margin-top: -2px">
                <FormItem
                  label="发货单位"
                  prop="extractName"
                  :rules="
                    formItem.pricingMethod == '1'
                      ? ruleValidate.extractName
                      : [{ required: false }]
                  "
                >
                  <Input
                    style="width: 210px"
                    v-model="formItem.extractName"
                    placeholder="公司名称"
                  />
                </FormItem>

                <FormItem
                  style="margin-left: -15px"
                  label="联系人"
                  prop="extracContactName"
                  :rules="
                    formItem.pricingMethod == '1'
                      ? ruleValidate.extracContactName
                      : [{ required: false }]
                  "
                >
                  <Input
                    style="width: 280px; margin-left: 15px"
                    v-model="formItem.extracContactName"
                    placeholder="输入联系人名称"
                  />
                </FormItem>
                <FormItem
                  label="联系电话"
                  prop="extractPhone"
                  :rules="
                    formItem.pricingMethod == '1'
                      ? ruleValidate.extractPhone
                      : [{ required: false }]
                  "
                >
                  <Input
                    style="width: 210px"
                    v-model="formItem.extractPhone"
                    placeholder="输入发货方联系电话"
                  />
                </FormItem>
                <FormItem style="margin-left: -82px">
                  <span class="warningbtn" @click="CommonAddress">
                    使用常用路线 &nbsp; >
                  </span>
                </FormItem>
              </Col>
              <!-- 地址 -->
              <Col span="24">
                <FormItem label="发货地址" prop="beginAreaCodeShow">
                  <div style="width: 100%">
                    <Cascader
                      style="width: 210px"
                      v-model="formItem.beginAreaCodeShow"
                      :data="loadingData"
                      :load-data="addLoadingProvinceloadData"
                      @on-change="getStartArea"
                      :clearable="false"
                    ></Cascader>
                  </div>
                </FormItem>
                <FormItem
                  label="详细地址"
                  v-if="DetailedAddresShow"
                  prop="beginAddress"
                >
                  <Input
                    @click.native="beginAddressClick"
                    style="width: 280px"
                    v-model="formItem.beginAddress"
                    placeholder="选择详细地址"
                  />
                </FormItem>
                <FormItem label="装运范围" prop="pretendEnclosure">
                  <div>
                    <InputNumber
                      :min="0"
                      v-model="formItem.pretendEnclosure"
                      style="width: 210px"
                      placeholder="输入电子围栏半径"
                    >
                    </InputNumber>
                    <span class="InputNuspan"> km</span>
                  </div>
                </FormItem>
              </Col>
              <Col span="24" style="margin-top: -2px">
                <FormItem
                  label="收货单位"
                  prop="takeName"
                  :rules="
                    formItem.pricingMethod == '1'
                      ? ruleValidate.takeName
                      : [{ required: false }]
                  "
                >
                  <Input
                    style="width: 210px"
                    v-model="formItem.takeName"
                    placeholder="公司名称"
                  />
                </FormItem>

                <FormItem
                  style="margin-left: -15px"
                  label="联系人"
                  prop="takeContactName"
                  :rules="
                    formItem.pricingMethod == '1'
                      ? ruleValidate.takeContactName
                      : [{ required: false }]
                  "
                >
                  <Input
                    style="width: 280px; margin-left: 15px"
                    v-model="formItem.takeContactName"
                    placeholder="输入联系人名称"
                  />
                </FormItem>
                <FormItem
                  label="联系电话"
                  prop="takePhone"
                  :rules="
                    formItem.pricingMethod == '1'
                      ? ruleValidate.takePhone
                      : [{ required: false }]
                  "
                >
                  <Input
                    style="width: 210px"
                    v-model="formItem.takePhone"
                    placeholder="输入收货方联系电话"
                  />
                </FormItem>
              </Col>
              <Col span="24" style="margin-top: 10px">
                <FormItem label="卸货地址" prop="endAreaCodeShow">
                  <div style="width: 100%">
                    <Cascader
                      style="width: 210px"
                      :data="ProvinceData"
                      v-model="formItem.endAreaCodeShow"
                      clearable
                      :load-data="addProvinceloadData"
                      @on-change="getEndArea"
                    ></Cascader>
                  </div>
                </FormItem>
                <FormItem
                  label="详细地址"
                  v-if="DetailedAddresShow"
                  prop="endAddress"
                >
                  <Input
                    @click.native="angeSign"
                    style="width: 280px"
                    v-model="formItem.endAddress"
                    placeholder="选择详细地址"
                  />
                </FormItem>
                <FormItem label="签收范围" prop="dischargeEnclosure">
                  <div>
                    <InputNumber
                      :min="0"
                      style="width: 210px"
                      v-model="formItem.dischargeEnclosure"
                      placeholder="输入电子围栏半径"
                    >
                    </InputNumber>
                    <span class="InputNuspan"> km</span>
                  </div>
                </FormItem>
              </Col>

              <div class="boxcss"></div>
              <Col span="24">
                <FormItem label="货品名称" prop="goodSubType">
                  <Input
                    style="width: 210px"
                    v-model="formItem.goodSubType"
                    placeholder="输入货品名称"
                  />
                </FormItem>
                <FormItem label="货物分类" prop="goodType">
                  <Select
                    clearable
                    v-model="formItem.goodType"
                    style="width: 210px"
                    placeholder="选择计价方式"
                  >
                    <Option
                      v-for="(item, index) in goodType"
                      :key="index"
                      :value="item.value"
                      >{{ item.label }}
                    </Option>
                  </Select>
                </FormItem>
                <FormItem label="运费单价" prop="freightUnitPrice">
                  <div>
                    <InputNumber
                      :min="0"
                      style="width: 210px"
                      v-model="formItem.freightUnitPrice"
                      placeholder="输入运费单价"
                    >
                    </InputNumber>
                    <span class="InputNuspanfont">元/吨</span>
                  </div>
                </FormItem>
                <FormItem label="计价方式" prop="valuationUnit">
                  <Select
                    clearable
                    v-model="formItem.valuationUnit"
                    style="width: 210px"
                    placeholder="选择计价方式"
                    @on-change="Pricingvalua"
                  >
                    <Option
                      v-for="(item, index) in PricingMeth"
                      :key="index"
                      :value="item.value"
                      >{{ item.label }}
                    </Option>
                  </Select>
                </FormItem>
              </Col>

              <div class="boxcss"></div>
              <Col span="24">
                <FormItem
                  style="margin-left: -30px"
                  label="重量"
                  prop="goodWeight"
                >
                  <div>
                    <InputNumber
                      :min="0"
                      style="width: 210px; margin-left: 30px"
                      v-model="formItem.goodWeight"
                      placeholder="输入货品重量"
                    >
                    </InputNumber>
                    <span class="InputNuspan">吨</span>
                  </div>
                </FormItem>
                <FormItem
                  style="margin-left: -28px"
                  label="体积"
                  prop="volume"
                  :rules="
                    formItem.valuationUnit == '2'
                      ? ruleValidate.volume
                      : [{ required: false }]
                  "
                >
                  <div>
                    <InputNumber
                      :min="0"
                      style="width: 210px; margin-left: 28px"
                      v-model="formItem.volume"
                      placeholder="输入货品体积"
                    >
                    </InputNumber>
                    <span class="InputNuspan">m³</span>
                  </div>
                </FormItem>
                <FormItem
                  style="margin-left: -28px"
                  label="件数"
                  prop="piece"
                  :rules="
                    formItem.valuationUnit == '3'
                      ? ruleValidate.piece
                      : [{ required: false }]
                  "
                >
                  <div>
                    <InputNumber
                      :min="0"
                      style="width: 210px; margin-left: 28px"
                      v-model="formItem.piece"
                      placeholder="输入货品件数"
                    >
                    </InputNumber>
                    <span class="InputNuspan">件</span>
                  </div>
                </FormItem>
              </Col>
              <FormItem label="装车时间" prop="">
                <DatePicker
                  clearable
                  type="datetime"
                  placement="bottom-end"
                  placeholder="请选择装货截至时间"
                  style="width: 200px"
                  format="yyyy-MM-dd HH:mm:ss"
                  v-model="formItem.loadingTime"
                  @on-ok="clickDate"
                  @on-change="changeDate"
                ></DatePicker>
              </FormItem>
              <FormItem>
                <div
                  v-if="choiceTiemShow"
                  :class="
                    choiceTiemList.length > 21 ? ' item-tag1' : 'item-tag'
                  "
                >
                  <el-tag
                    :key="tag"
                    v-for="tag in choiceTiemList"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                    class="tag-item"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </FormItem>
              <div class="boxcss"></div>
              <FormItem label="运输时效" prop="prescription">
                <div>
                  <InputNumber
                    :min="0"
                    style="width: 280px"
                    v-model="formItem.prescription"
                    placeholder="装车后要求司机去卸货时效"
                  >
                  </InputNumber>
                  <span class="InputNus">小时</span>
                </div>
              </FormItem>
              <div class="boxcss"></div>
              <FormItem label="运输要求">
                <Input
                  type="textarea"
                  style="width: 510px"
                  v-model="formItem.content"
                  placeholder="填写运输要求信息"
                />
              </FormItem>
            </Form>
          </div>
        </Row>
      </Card>
      <div class="Cardokbtn">
        <div class="okbtn">
          <div style="margin-left: 45px">
            <Button @click="postSource" type="primary">发布货源</Button>
            <Button style="margin-left: 15px" @click="handleReset">重置</Button>
          </div>
        </div>
      </div>
    </div>

    <!--常用地址 -->
    <Modal v-model="modaCommon" title="常用路线" width="75%">
      <div style="margin-left: 1px">
        <Row>
          <Table
            :loading="loading"
            border
            :columns="columns"
            :data="data"
            ref="table"
            sortable="custom"
            @on-sort-change="changeSort"
            @on-selection-change="changeSelect"
          ></Table>
        </Row>
        <Row type="flex" justify="end" class="page">
          <!-- <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page> -->
        </Row>
      </div>
      <div slot="footer">
        <Button @click="Selecdetermine" type="primary">确定</Button>
        <Button @click="modaCommon = false">取消</Button>
      </div>
    </Modal>
    <!--  -->
    <Modal width="60%" v-model="changeAddress" :title="changeAddresstitle">
      <div class="modal-box">
        <div style="margin: 0 0 20px 0">
          <div v-if="changeAddresstitle == '装货详细地址'">
            <!-- this.SelectBegAreaAddress[2].__label -->
            <span class="labelfonsize">{{ this.ProvinceCityCounty }}</span>
          </div>
          <div v-else>
            <span class="labelfonsize">{{ this.ProvinceCityCounty }}</span>
          </div>
        </div>
        <div style="height: 300px" id="Addresscontaine" class="map">
          <div id="pickerBoxadd">
            <input
              id="pickerInputthree"
              placeholder="输入关键字选取地点"
              autocomplete="off"
            />
            <div id="poiInfo"></div>
          </div>
        </div>

        <div id="right">
          <div style="display: none">
            <div>
              <div class="title">选择模式</div>
              <Input type="radio" name="mode" value="dragMap" checked
                >拖拽地图模式</Input
              >
              <div></div>
              <Input type="radio" name="mode" value="dragMarker"
                >拖拽Marker模式</Input
              >
            </div>
            <div>
              <button id="start">开始选点</button>
              <button id="stop">关闭选点</button>
            </div>
          </div>
          <div style="margin: 20px 0 0 0">
            <div class="title">选址结果</div>
            <div class="c">
              经纬度：
              <span id="lnglatAddress"></span>
            </div>
            <div class="c">
              地址：
              <span id="addressadd"></span>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button @click="changeDetailAddress" type="primary">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getCompanyInfoByUserIds } from "@/api/order";
import {
  getCommonLine,
  publicGoods,
  getProvinceData,
  getAreaCityList,
} from "@/api/index";
export default {
  data() {
    return {
      ProvinceData: [], //卸省份数据
      loadingData: [], //装货省份数据
      SelectCommonAddress: [],
      currentChoose: "",
      changeAddress: false, //选择详细地址弹框
      changeAddresstitle: "装货详细地址",
      companyList: [], //发货公司数据
      SelectBegAreaAddress: [], //发货地址省市县
      SelectEndAreaAddress: [], //卸货地址省市县
      SelectMapDetailAddress: "", //地图选择的详细地址
      SelectMapDetailLat: "", //地图选择的经度
      SelectMapDetailLng: "", //地图选择的纬度
      addressMap: null, //地图全局对象
      addresPoiPicker: null, //地图poi全局对象
      ProvinceCityCounty: " ", //地图弹框显示省市县的
      DetailedAddresShow: true,
      SelectCityArea: "", //县级 用于字符串切割
      Quotation: [
        { value: "1", label: "按单价" },
        { value: "2", label: "按整单" },
      ],
      PricingSethodS: [
        { value: "1", label: "定价货源" },
        // { value: "2", label: "竞价货源" },
      ],
      InvoiceNot: [
        { value: "1", label: "开票" },
        { value: "2", label: "不开票" },
      ],
      PricingMeth: [
        { value: "1", label: "按重量" },
        { value: "2", label: "按体积" },
        { value: "3", label: "按件数" },
      ],

      currentid: 0,
      SelectAddress: "",
      mapDetailEdddress: "", //地址的选择
      formItem: {
        companyUserId: "",
        beginAreaCode: "", //起始县区列表code
        beginAreaCodeShow: "", //起始县区列表 回显code
        beginAddress: "", //装货详细地址
        pretendEnclosure: "", //装货电子围栏
        beginLng: "", //装货经度
        beginLat: "", //装货纬度
        endLng: "", //	卸货经度
        endLat: "", //	卸货纬度
        dischargeEnclosure: "", //卸货电子围栏
        endAreaCode: "", //结束县区列表 code
        endAreaCodeShow: "", //结束县区列表 回显code
        endAddress: "", //卸货详细地址
        valuationUnit: "", //计价单位 1按重量 2按体积 3按件数
        volume: "", //体积
        piece: "", //件数
        pricingMethod: "1", //定价方式 1定价货源 2竞价货源
        pricingType: "1", //报价类型 1按单价 2按整单
        invoicing: "1", //是否开票 1开票 2不开票
        payType: "", //结算方式
        bagType: "1", //装卸方式
        useVehicleType: "1", //用车类型
        vehicleType: "", //车型
        vehicleLength: "", //车长
        goodType: "", //货物一级
        goodSubType: "", //货物二级
        takeName: "", //收货人
        takePhone: "", //收货人手机号
        idCardOrBusLicenseNo: "", //收货方 --- 身份证/营业执照号
        loadingIdCard: "",
        goodWeight: "", //货物重量
        content: "", //备注
        goodsUnitPrice: "", //货物单价
        freightUnitPrice: "", //运费单价
        estimateAmt: "", //运费总价
        maximumFreight: "", //运费最高价
        cargoDamage: "", //货损
        prescription: "", //运输时效
        extractName: "", //提货人名称
        extractPhone: "", //提货人电话
        addUnloadingAddress: "", //回显卸货地址id
        addLoadingAddress: "", //回显发货地址id
        extracContactName: "", //提货联系人
        takeContactName: "", //收货联系人
        damageType: "1", //货损类型
        loadingTime: "", //装车时间
        loadingTimes: "", //装车时间
      },
      columns: [
        // 表头
        {
          title: "#",
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "选择",
          key: "id",
          width: 70,
          align: "center",
          render: (h, params) => {
            let id = params.row._index;
            let flag = false;
            if (this.currentChoose === id) {
              flag = true;
            } else {
              flag = false;
            }
            let self = this;
            return h("div", [
              h("Radio", {
                props: {
                  value: flag,
                },
                on: {
                  "on-change": () => {
                    self.currentChoose = id;
                    self.SelectCommonAddress = params.row;
                  },
                },
              }),
            ]);
          },
        },
        {
          title: "发货地址",
          minWidth: 270,
          sortable: false,
          render: (h, params) => {
            let text =
              params.row.beginProvinceName +
              params.row.beginCityName +
              params.row.beginAreaName +
              params.row.beginAddress;
            let placTop = "top";
            if (params.index == 0) {
              placTop = "bottom";
            } else {
              placTop = "top";
            }
            return h(
              "Tooltip",
              {
                props: { placement: placTop, maxWidth: "270", transfer: true },
              },
              [
                h(
                  "div",
                  {
                    style: {
                      width: params.column._width * 0.85 + "px",
                      overflow: "hidden",
                      whiteSpace: "nowrap",
                      textOverflow: "ellipsis",
                    },
                  },
                  text
                ),
                h(
                  "span",
                  {
                    slot: "content",
                    style: {
                      whiteSpace: "normal",
                      wordBreak: "break-all",
                    },
                  },
                  text
                ),
              ]
            );
          },
        },
        {
          title: "装运范围",
          width: 100,
          sortable: false,
          render: (h, params) => {
            return h("span", params.row.pretendEnclosure + " km");
          },
        },
        {
          title: "发货单位",
          width: 150,
          key: "extractName",
          sortable: false,
          tooltip: true,
        },
        {
          title: "联系人",
          width: 140,
          key: "extracContactName",
          sortable: false,
        },
        {
          title: "联系电话",
          width: 140,
          key: "extractPhone",
          sortable: false,
        },
        // {
        //   title: "统一社会信用代码",
        //   width: 150,
        //   key: "idCardOrBusLicenseNo",
        //   sortable: false,
        //   tooltip: true,
        // },

        {
          title: "卸货地址",
          minWidth: 270,
          sortable: false,
          render: (h, params) => {
            let text =
              params.row.endProvinceName +
              params.row.endCityName +
              params.row.endAreaName +
              params.row.endAddress;
            let placTop = "top";
            if (params.index == 0) {
              placTop = "bottom";
            } else {
              placTop = "top";
            }
            return h(
              "Tooltip",
              {
                props: { placement: placTop, transfer: true, maxWidth: "270" },
              },
              [
                h(
                  "div",
                  {
                    style: {
                      width: params.column._width * 0.85 + "px",
                      overflow: "hidden",
                      whiteSpace: "nowrap",
                      textOverflow: "ellipsis",
                    },
                  },
                  text
                ),
                h(
                  "span",
                  {
                    slot: "content",
                    style: {
                      whiteSpace: "normal",
                      wordBreak: "break-all",
                      paddingRight: "5px",
                    },
                  },
                  text
                ),
              ]
            );
          },
        },
        {
          title: "签收范围",
          width: 100,
          sortable: false,
          render: (h, params) => {
            return h("span", params.row.dischargeEnclosure + " km");
          },
        },
        {
          title: "收货单位",
          width: 150,
          key: "takeName",
          sortable: false,
          tooltip: true,
        },
        {
          title: "联系人",
          width: 140,
          key: "takeContactName",
          sortable: false,
        },
        {
          title: "联系电话",
          width: 140,
          key: "extractPhone",
          sortable: false,
        },
        {
          title: "统一社会信用代码",
          width: 150,
          key: "loadingIdCard",
          sortable: false,
          tooltip: true,
        },
      ],

      data: [], // 表单数据
      pageNumber: 1, // 当前页数
      pageSize: 10, // 页面大小
      total: 0, // 表单数据总数
      openTip: true, // 显示提示
      showType: "0", // 添加或编辑标识
      showDrawer: false, // 显示添加编辑抽屉
      loading: true, // 表单加载状态

      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
      },

      modaCommon: false,
      Pricingfots: "",
      type: 1,
      moda2: true,
      useVehicleTypeList: [
        {
          label: "整车",
          val: "1",
        },
        {
          label: "零担",
          val: "2",
        },
      ],
      ruleValidate: {
        goodSubType: [
          {
            required: true,
            message: "输入货品名称",
            trigger: "blur",
          },
        ],
        beginAreaCodeShow: [
          {
            type: "array",
            required: true,
            message: "选择发货地址",
            trigger: "blur",
          },
        ],
        beginAddress: [
          {
            required: true,
            message: "选择装货详细地址",
            trigger: "blur",
          },
        ],

        pretendEnclosure: [
          {
            required: true,
            type: "number",
            message: "输入装运范围",
            trigger: "blur",
          },
        ],
        dischargeEnclosure: [
          {
            type: "number",
            required: true,
            message: "输入签收范围",
            trigger: "blur",
          },
        ],
        endAddress: [
          {
            required: true,
            message: "选择卸货详细地址",
            trigger: "blur",
          },
        ],
        endAreaCodeShow: [
          {
            type: "array",
            required: true,
            message: "选择卸货地址",
            trigger: "blur",
          },
        ],
        volume: [
          {
            type: "number",
            required: true,
            message: "输入体积",
            trigger: "blur",
          },
        ],
        piece: [
          {
            type: "number",
            required: true,
            message: "输入件数",
            trigger: "blur",
          },
        ],
        maximumFreight: [
          {
            type: "number",
            required: true,
            message: "输入最高价",
            trigger: "blur",
          },
        ],
        valuationUnit: [
          {
            required: true,
            message: "选择结算方式",
            trigger: "change",
          },
        ],
        loadingTimes: [
          {
            type: "number",
            required: true,
            message: "输入装运时效",
            trigger: "blur",
          },
        ],

        prescription: [
          {
            type: "number",
            required: true,
            message: "输入运输时效",
            trigger: "blur",
          },
        ],
        pricingMethod: [
          {
            required: true,
            message: "选择定价方式",
            trigger: "change",
          },
        ],
        invoicing: [
          {
            required: true,
            message: "选择是否开票",
            trigger: "change",
          },
        ],
        vehicleLength: [
          {
            required: true,
            message: "选择车长",
            trigger: "change",
          },
        ],
        companyUserId: [
          {
            required: true,
            type: "number",
            message: "选择发货公司",
            trigger: "change",
          },
        ],
        vehicleType: [
          {
            required: true,
            message: "选择车型",
            trigger: "change",
          },
        ],
        pricingType: [
          {
            required: true,
            message: "选择报价方式",
            trigger: "change",
          },
        ],
        goodType: [
          {
            required: true,
            message: "选择货物分类",
            trigger: "change",
          },
        ],
        estimateAmt: [
          {
            type: "number",
            required: true,
            message: "填写运费总价",
            trigger: "blur",
          },
        ],
        goodWeight: [
          {
            type: "number",
            required: true,
            message: "填写货物重量",
            trigger: "blur",
          },
        ],
        freightUnitPrice: [
          {
            type: "number",
            required: true,
            message: "填写运费单价",
            trigger: "blur",
          },
        ],
        payType: [
          {
            required: true,
            message: "选择结算方式",
            trigger: "change",
          },
        ],
        bagType: [
          {
            required: true,
            message: "选择装卸方式",
            trigger: "change",
          },
        ],
        useVehicleType: [
          {
            required: true,
            message: "选择用车类型",
            trigger: "change",
          },
        ],
        goodNum: [
          {
            required: true,
            message: "输入货源数量",
            trigger: "blur",
          },
        ],
        takePhone: [
          {
            required: true,
            message: "输入收货方电话",
            trigger: "blur",
          },
        ],

        loadingIdCard: [
          {
            required: true,
            message: "统一社会信用代码/身份证号",
            trigger: "blur",
          },
          {
            validator: this.Validate.IDCreditCode,
            trigger: "blur",
          },
        ],
        idCardOrBusLicenseNo: [
          {
            required: true,
            message: "统一社会信用代码/身份证号",
            trigger: "blur",
          },
          {
            validator: this.Validate.IDCreditCode,
            trigger: "blur",
          },
        ],
        extractName: [
          {
            required: true,
            message: "输入提货联系人",
            trigger: "blur",
          },
        ],
        extractPhone: [
          {
            required: true,
            message: "输入提货联系人电话",
            trigger: "blur",
          },
        ],
        takeName: [
          {
            required: true,
            message: "输入收货方单位",
            trigger: "blur",
          },
        ],
        takeContactName: [
          {
            required: true,
            message: "输入收货联系人",
            trigger: "blur",
          },
        ],
        extracContactName: [
          {
            required: true,
            message: "输入发货联系人",
            trigger: "blur",
          },
        ],
      },
      vehicleLength: [],
      vehicleType: [],
      goodType: [],
      payTypelist: [],
      categorys: [],
      selectedOptions: [],
      Common: "",

      longitude: "",
      latitude: "",
      loadingLongitude: "",
      loadingLatitude: "",
      choiceTiemList: [], //时间数组
      choiceTiemShow: true,
      choiceTiem: "", //当前选择的时间
    };
  },

  created() {},
  mounted() {
    this.vehicleLength = JSON.parse(
      window.localStorage.getItem("vehicle_length_type")
    );
    this.vehicleType = JSON.parse(window.localStorage.getItem("vehicle_type"));
    this.goodType = JSON.parse(window.localStorage.getItem("good_type"));
    let arr = JSON.parse(window.localStorage.getItem("payment_method_type"));
    let array = JSON.parse(
      window.localStorage.getItem("loading_unloading_mode")
    );
    for (let i = 0; i < arr.length; i++) {
      let obj = {};
      obj.label = arr[i].description;
      obj.value = arr[i].value;
      this.payTypelist.push(obj);
    }
    for (let i = 0; i < array.length; i++) {
      let obj = {};
      obj.label = array[i].description;
      obj.value = array[i].value;
      this.categorys.push(obj);
    }
    this.goodType.forEach((item) => {
      item.label = item.description;
      if (item.subList) {
        item.subList.forEach((item2) => {
          item2.label = item2.description;
        });
        item.children = item.subList;
      }
    });
    this.getMap();
    this.getCompanyId();
    this.getProvinceDataList();
  },
  methods: {
    //时间选择
    clickDate(val) {
      if (!this.choiceTiem) {
        return this.$Message.warning("请选择装车时间");
      }
      this.choiceTiemList.push(this.choiceTiem);
      this.formItem.loadingTime = "";
      this.choiceTiem = "";
    },
    changeDate(val) {
      this.choiceTiem = val;
    },
    handleClose(tag) {
      this.choiceTiemList.splice(this.choiceTiemList.indexOf(tag), 1);
    },
    // 获取卸货省份数据
    getProvinceDataList() {
      let fn = () => {
        getProvinceData().then((res) => {
          if (res.code == 200) {
            res.result.forEach(function (e) {
              e.level = 1;
              e.label = e.provinceName;
              e.pid = e.provinceCode;
              e.value = e.provinceCode;
              e.loading = false;
              e.children = [];
            });
            this.ProvinceData = res.result;
            this.loadingData = res.result;
          } else {
            this.$Message.error(res.message);
          }
        });
      };
      fn();
    },
    //搜索装货详细地址
    addLoadingProvinceloadData(item, callback) {
      item.loading = true;
      getAreaCityList({ code: item.value, type: item.level }).then((res) => {
        item.loading = false;
        if (res.code == 200) {
          res.result.forEach(function (e) {
            if (e.level != 3) {
              e.level = e.level;
              e.label = e.label;
              e.pid = e.pid;
              e.value = e.value;
              e.loading = false;
              e.children = [];
            } else {
              e.value = e.value;
              e.label = e.label;
            }
          });
          item.children = res.result;
          callback();
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 搜索卸货详细地址
    addProvinceloadData(item, callback) {
      item.loading = true;
      getAreaCityList({ code: item.value, type: item.level }).then((res) => {
        item.loading = false;
        if (res.code == 200) {
          res.result.forEach(function (e) {
            if (e.level != 3) {
              e.level = e.level;
              e.label = e.label;
              e.pid = e.pid;
              e.value = e.value;
              e.loading = false;
              e.children = [];
            } else {
              e.value = e.value;
              e.label = e.label;
            }
          });
          item.children = res.result;
          callback();
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 单选框选中是否发布
    ContinuChange(val) {},
    // 计价方式
    Pricingvalua(val) {
      this.formItem.valuationUnit = val;
    },
    // 选择详细地址的弹框确定
    changeDetailAddress() {
      this.DetailedAddresShow = false;
      this.$nextTick(() => {
        this.DetailedAddresShow = true;
      });
      if (this.SelectMapDetailAddress == "") {
        return this.$Message.warning("请先选择正确的地址");
      }
      // this.addressMap.destroy();
      if (this.mapDetailEdddress == "1") {
        this.formItem.beginAddress = this.SelectMapDetailAddress;
        this.formItem.beginLat = this.SelectMapDetailLat;
        this.formItem.beginLng = this.SelectMapDetailLng;
      } else if (this.mapDetailEdddress == "2") {
        this.formItem.endAddress = this.SelectMapDetailAddress;
        this.formItem.endLat = this.SelectMapDetailLat;
        this.formItem.endLng = this.SelectMapDetailLng;
      }
      this.changeAddress = false;
    },

    //装货详细地址
    beginAddressClick() {
      if (this.formItem.beginAreaCodeShow != "") {
        this.ProvinceCityCounty = this.SelectBegAreaAddress[2].__label;
        this.mapDetailEdddress = "1";
        this.changeAddress = true;
        this.changeAddresstitle = "装货详细地址";
      } else {
        this.$Message.warning("请先选择装货地");
      }
      if (this.formItem.beginLng == "") {
        if (this.loadingLongitude && this.loadingLatitude) {
          this.addressMap.setCenter([
            Number(this.loadingLongitude),
            Number(this.loadingLatitude),
          ]);
        } else {
          this.addressMap.setCenter([116.378517, 39.865246]);
        }
      } else {
        this.addressMap.setCenter([
          Number(this.formItem.beginLng),
          Number(this.formItem.beginLat),
        ]);
      }
      this.addresPoiPicker.opts.input.value = "";
      this.addresPoiPicker.setCity(this.SelectBegAreaAddress[1].label);
      this.SelectCityArea = this.SelectBegAreaAddress[2].label;
    },

    //卸货详细地址
    angeSign() {
      if (this.formItem.endAreaCodeShow != "") {
        this.ProvinceCityCounty = this.SelectEndAreaAddress[2].__label;
        this.mapDetailEdddress = "2";
        this.changeAddress = true;
        this.changeAddresstitle = "卸货详细地址";
      } else {
        this.$Message.warning("请先选择卸货地");
      }
      if (this.formItem.endLng == "") {
        if (this.longitude && this.latitude) {
          this.addressMap.setCenter([
            Number(this.longitude),
            Number(this.latitude),
          ]);
        } else {
          this.addressMap.setCenter([116.378517, 39.865246]);
        }
      } else {
        this.addressMap.setCenter([
          Number(this.formItem.endLng),
          Number(this.formItem.endLat),
        ]);
      }
      this.addresPoiPicker.setCity(this.SelectEndAreaAddress[1].label);
      this.addresPoiPicker.opts.input.value = "";
      this.SelectCityArea = this.SelectEndAreaAddress[2].label;
    },
    // 获取发货公司
    getCompanyId() {
      getCompanyInfoByUserIds().then((res) => {
        this.companyList = res.result;
        this.companyList = this.companyList.filter(
          (col) => col.companyName != ""
        );
      });
    },
    // 选择发货公司
    companySelect(val) {
      let data = {};
      if (val) {
        this.companyList.forEach((item) => {
          if (item.nickName) {
            if (item.userId == val) {
              data = item;
              this.currentChoose = "";
            } else {
              // item.flag = true;
            }
          }
        });
        this.formItem.extractName = data.companyName;
        this.formItem.extractPhone = data.mobile;
        this.formItem.extracContactName = data.personalName;
      }
    },
    //改变 定价方式
    changePricingMethod() {
      this.formItem.freightUnitPrice = "";
      this.formItem.estimateAmt = "";
      this.formItem.maximumFreight = "";
    },
    // 报价方式
    changePricingType(val) {
      this.formItem.freightUnitPrice = "";
      this.formItem.estimateAmt = "";
      this.formItem.maximumFreight = "";
    },

    // 点击选择路线
    Selecdetermine() {
      this.modaCommon = false;
      this.SelectBegAreaAddress = [];
      this.SelectEndAreaAddress = [];

      this.SelectBegAreaAddress.push({
        label: this.SelectCommonAddress.beginProvinceName,
        value: this.SelectCommonAddress.beginProvinceCode,
      });
      this.SelectBegAreaAddress.push({
        label: this.SelectCommonAddress.beginCityName,
        value: this.SelectCommonAddress.beginCityCode,
      });
      this.SelectBegAreaAddress.push({
        label: this.SelectCommonAddress.beginAreaName,
        value: this.SelectCommonAddress.beginAreaCode,
        __label:
          this.SelectCommonAddress.beginProvinceName +
          "/" +
          this.SelectCommonAddress.beginCityName +
          "/" +
          this.SelectCommonAddress.beginAreaName,
        __value: [
          this.SelectCommonAddress.beginProvinceCode,
          this.SelectCommonAddress.beginCityCode,
          this.SelectCommonAddress.beginAreaCode,
        ],
      });

      this.formItem.beginAreaCode = this.SelectCommonAddress.beginAreaCode;
      this.formItem.beginAreaCodeShow = this.SelectBegAreaAddress[2].__value;
      this.formItem.beginAddress = this.SelectCommonAddress.beginAddress;
      this.formItem.beginLat = this.SelectCommonAddress.beginLat;
      this.formItem.beginLng = this.SelectCommonAddress.beginLng;
      this.formItem.dischargeEnclosure =
        this.SelectCommonAddress.dischargeEnclosure;

      this.SelectEndAreaAddress.push({
        label: this.SelectCommonAddress.endProvinceName,
        value: this.SelectCommonAddress.endProvinceCode,
      });
      this.SelectEndAreaAddress.push({
        label: this.SelectCommonAddress.endCityName,
        value: this.SelectCommonAddress.endCityCode,
      });
      this.SelectEndAreaAddress.push({
        label: this.SelectCommonAddress.endAreaName,
        value: this.SelectCommonAddress.endAreaCode,
        __label:
          this.SelectCommonAddress.endProvinceName +
          "/" +
          this.SelectCommonAddress.endCityName +
          "/" +
          this.SelectCommonAddress.endCityName,
        __value: [
          this.SelectCommonAddress.endProvinceCode,
          this.SelectCommonAddress.endCityCode,
          this.SelectCommonAddress.endAreaCode,
        ],
      });
      this.formItem.endAreaCode = this.SelectCommonAddress.endAreaCode;
      this.formItem.endAreaCodeShow = this.SelectEndAreaAddress[2].__value;
      this.formItem.endAddress = this.SelectCommonAddress.endAddress;
      this.formItem.endLng = this.SelectCommonAddress.endLng;
      this.formItem.endLat = this.SelectCommonAddress.endLat;
      this.formItem.pretendEnclosure =
        this.SelectCommonAddress.pretendEnclosure;

      this.formItem.extractName = this.SelectCommonAddress.extractName;
      this.formItem.extractPhone = this.SelectCommonAddress.extractPhone;
      this.formItem.idCardOrBusLicenseNo =
        this.SelectCommonAddress.idCardOrBusLicenseNo;
      this.formItem.takeName = this.SelectCommonAddress.takeName;
      this.formItem.takePhone = this.SelectCommonAddress.takePhone;
      this.formItem.loadingIdCard = this.SelectCommonAddress.loadingIdCard;
      this.formItem.extracContactName =
        this.SelectCommonAddress.extracContactName;
      this.formItem.takeContactName = this.SelectCommonAddress.takeContactName;
    },
    getCommonLineDataList() {
      this.loading = true;
      this.searchForm.commonId = this.formItem.companyUserId;
      getCommonLine(this.searchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.data = res.result.records;

          this.total = res.result.totalElements;
          if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
            this.searchForm.pageNumber -= 1;
            this.getCommonLineDataList();
          }
        }
      });
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getCommonLineDataList();
      this.clearSelectAll();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getCommonLineDataList();
    },

    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order === "normal") {
        this.searchForm.order = "";
      }
      this.getCommonLineDataList();
    },
    // 常用地址
    CommonAddress() {
      this.Common = 1;
      if (this.formItem.companyUserId > 0) {
        this.modaCommon = true;
        this.currentChoose = "";
        this.getCommonLineDataList();
      } else {
        this.$Message.warning("选择选择发货公司");
      }
    },
    getMap() {
      let that = this;
      that.addressMap = new AMap.Map("Addresscontaine", {
        center: [116.378517, 39.865246], // 默认初始化经纬度 如果为空则默认北京
        zoom: 10,
      });
      AMapUI.loadUI(
        ["misc/PoiPicker", "misc/PositionPicker"],
        function (PoiPicker, PositionPicker) {
          that.addresPoiPicker = new PoiPicker({
            // city: "", // 初始化 检索城市
            input: "pickerInputthree",
          });
          var positionPicker = new PositionPicker({
            mode: "dragMap",
            map: that.addressMap,
          });
          positionPicker.on("success", function (positionResult) {
            //全局变量 存储选择的地址信息 info.adress poi.location
            let mapaddress = [];
            if (that.ProvinceCityCounty != "") {
              mapaddress = positionResult.address.split(that.SelectCityArea);
              //地图选择的详细地址
            }
            if (mapaddress.length < 2) {
              that.SelectMapDetailAddress = "";
            } else {
              for (let index = 0; index < mapaddress.length; index++) {
                if (index > 0) {
                  if (index == 1) {
                    that.SelectMapDetailAddress = mapaddress[index];
                  } else {
                    that.SelectMapDetailAddress +=
                      that.SelectCityArea + mapaddress[index];
                  }
                }
              }
            }

            that.SelectMapDetailLat = positionResult.position.lat; //地图选择的经度
            that.SelectMapDetailLng = positionResult.position.lng; //地图选择的纬度
            document.getElementById("lnglatAddress").innerHTML =
              positionResult.position;
            document.getElementById("addressadd").innerHTML =
              positionResult.address;
          });
          positionPicker.on("fail", function (positionResult) {});
          var onModeChange = function (e) {
            positionPicker.setMode(e.target.value);
          };
          var startButton = document.getElementById("start");
          var stopButton = document.getElementById("stop");
          var dragMapMode = document.getElementsByName("mode")[0];
          var dragMarkerMode = document.getElementsByName("mode")[1];
          startButton.addEventListener("click", function () {
            positionPicker.start(map.getBounds().getSouthWest());
          });
          stopButton.addEventListener("click", function () {
            positionPicker.stop();
          });
          dragMapMode.addEventListener("change", onModeChange);
          dragMarkerMode.addEventListener("change", onModeChange);
          positionPicker.start();
          that.addressMap.panBy(0, 1);
          that.addressMap.addControl(
            new AMap.ToolBar({
              liteStyle: true,
            })
          );
          //初始化poiPicker
          poiPickerReady(that.addresPoiPicker);
        }
      );
      function poiPickerReady(poiPicker) {
        window.poiPicker = poiPicker;
        var marker = new AMap.Marker();
        var infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(0, -20),
        });
        //选取了某个POI
        poiPicker.on("poiPicked", function (poiResult) {
          var source = poiResult.source,
            poi = poiResult.item,
            info = {
              source: source,
              id: poi.id,
              name: poi.name,
              location: poi.location.toString(),
              address: poi.address,
            };
          marker.setMap(that.addressMap);
          infoWindow.setMap(that.addressMap);
          marker.setPosition(poi.location);
          infoWindow.setPosition(poi.location);
          document.getElementById("lnglatAddress").innerHTML = info.location;
          document.getElementById("addressadd").innerHTML = info.name;
          document.getElementById("pickerInputthree").value = info.name;

          that.SelectMapDetailAddress = info.name; //地图选择的详细地址
          that.SelectMapDetailLat = info.location.split(",")[0]; //地图选择的经度
          that.SelectMapDetailLng = info.location.split(",")[1]; //地图选择的纬度
          that.addressMap.setCenter(marker.getPosition());
        });
        poiPicker.onCityReady(function () {
          // poiPicker.suggest('美食');
        });
      }
    },
    startTime(val) {
      this.formItem.startDate = val;
    },
    endDate(val) {
      this.formItem.endDate = val;
    },
    getStartArea(value, selectedData) {
      if (selectedData) {
        this.loadingLongitude = selectedData[2].lng;
        this.loadingLatitude = selectedData[2].lat;
      }
      this.SelectBegAreaAddress = selectedData;
      this.formItem.beginAreaCode = value[2];
      this.formItem.beginAreaCodeShow = [
        selectedData[0].value,
        selectedData[1].value,
        selectedData[2].value,
      ];

      this.formItem.beginAddress = "";
      this.formItem.beginLat = "";
      this.formItem.beginLng = "";
    },
    onGoodType(value, selectedData) {
      this.formItem.goodType = value[0]; //货物一级
      // this.formItem.goodSubType = value[0]; //货物二级
    },
    getEndArea(value, selectedData) {
      if (selectedData) {
        this.longitude = selectedData[2].lng;
        this.latitude = selectedData[2].lat;
      }
      this.SelectEndAreaAddress = selectedData;
      this.formItem.endAreaCode = value[2];
      this.formItem.endAreaCodeShow = [
        selectedData[0].value,
        selectedData[1].value,
        selectedData[2].value,
      ];

      this.formItem.endAddress = "";
      this.formItem.endLat = "";
      this.formItem.endLng = "";
    },
    // PricingRadio
    PricingRadio(val) {
      if (val == 1) {
        this.Pricingfots = "按整单";
      } else {
        this.Pricingfots = "按单价";
      }
    },
    // 重置
    handleReset() {
      this.$Modal.confirm({
        title: "确认重置",
        content: "请确认您填写的信息全部重置",
        loading: true,
        onOk: () => {
          this.$Modal.remove();
          this.$refs.formValidate.resetFields();
          this.formItem.content = "";

          this.formItem.beginAreaCodeShow = "";
          this.formItem.beginAddress = "";
          this.formItem.endAreaCodeShow = "";
          this.formItem.endAddress = "";
          this.choiceTiemList = [];
        },
      });
    },
    // 发布
    postSource() {
      for (var key in this.formItem) {
        if (this.formItem[key] == null) {
          this.formItem[key] = "";
        }
      }
      if (this.choiceTiemList.length == 0) {
        return this.$Message.warning("请选择装车时间");
      }
      this.formItem.loadingTimes = this.choiceTiemList.join(",");
      this.$refs.formValidate.validate((valid) => {
        if (valid) {
          this.$Modal.confirm({
            title: "确认发布",
            content: "请确认您填写的信息准确无误，点击确认即可发布",
            loading: true,
            onOk: () => {
              if (this.formItem.vehicleLength.length > 0) {
                this.formItem.vehicleLength =
                  this.formItem.vehicleLength.join(",");
              }
              if (this.formItem.vehicleType.length > 0) {
                this.formItem.vehicleType = this.formItem.vehicleType.join(",");
              }
              publicGoods(this.formItem).then((res) => {
                this.$Modal.remove();
                if (res.code == 200) {
                  this.$Message.success("发布成功");
                } else {
                  this.$Message.error(res.message);
                  if (this.formItem.vehicleLength != "") {
                    this.formItem.vehicleLength =
                      this.formItem.vehicleLength.split(",");
                  }
                  if (this.formItem.vehicleType != "") {
                    this.formItem.vehicleType =
                      this.formItem.vehicleType.split(",");
                  }
                }
              });
            },
          });
        } else {
          this.$Message.error("请将源信息填写完整");
        }
      });
    },
    goBack() {
      this.$router.push({
        name: "sourceAudit",
        query: { key: this.$route.query.key },
      });
    },
    cancel() {
      this.$router.push({
        name: "sourceAudit",
        query: { key: this.$route.query.key },
      });
    },
  },
};
</script>

<style scoped lang="less">
.formRegister > .ivu-form > .ivu-form-item-label {
  width: 130px !important;
}
.labelfonsize {
  font-size: 15px;
  font-weight: 600;
}
.InputNus {
  position: absolute;
  top: 2px;
  right: -39px;
  width: 45px;
  height: 31px;
  padding: 7px 0 0 0;
  text-align: center;
  line-height: 60px;
  font-size: inherit;
  font-weight: 400;
  line-height: 1;
  color: #515a6e;
  text-align: center;
  // background-color: #f8f8f9;
  // border: 1px solid #dcdee2;
  border-radius: 4px;
}
.InputNuspanfont {
  position: absolute;
  top: 2px;
  right: -45px;
  width: 50px;
  height: 31px;
  padding: 7px 0 0 0;
  text-align: center;
  line-height: 60px;
  font-size: inherit;
  font-weight: 400;
  line-height: 1;
  color: #515a6e;
  text-align: center;
  // background-color: #f8f8f9;
  // border: 1px solid #dcdee2;
  border-radius: 4px;
}
#pickerBoxadd {
  position: absolute;
  z-index: 99999;
  top: 0px;
  right: 50px !important;
  height: 290px !important;
  /* width: 300px; */
  overflow: auto;
}

#pickerInputthree {
  width: 210px;
  padding: 5px 5px;
}
.ivu-modal-body {
  height: 600px;
  overflow: auto;
}

.InputNuspan {
  position: absolute;
  top: 2px;
  right: -26px;
  width: 30px;
  height: 31px;
  padding: 7px 0 0 0;
  text-align: center;
  line-height: 60px;
  font-size: inherit;
  font-weight: 400;
  line-height: 1;
  color: #515a6e;
  text-align: center;
  // background-color: #f8f8f9;
  // border: 1px solid #dcdee2;
  border-radius: 4px;
  // border-left: 0px;
}
#cardhgth {
  .ivu-card .ivu-card-bordered {
    .ivu-card-body {
      padding: 0 !important;
    }
  }
}
.ivu-card-body {
  padding: 0 !important;
}
.warningbtn {
  cursor: pointer;
  width: 120px;
  height: 50px;
  padding: 5px;
  /* background-color: #2d8cf0; */
  color: #f90;
  padding-top: 10px;
  font-weight: 800;
  font-size: 14px;
}
.addrsgbox {
  /* position: absolute;
  top: 47px;
  left: 42px; */
  height: 16px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.boxcss {
  /* margin:10px 20px 0; */
  margin-bottom: 13px;
}

.titlebox {
  height: 193px;
}

.amap_lib_placeSearch .poibox.highlight {
  background-color: #cae1ff;
}

.amap_lib_placeSearch .poi-more {
  display: none !important;
}
.Cardokbtn {
  position: relative;
  bottom: -5px;
  left: 0;
}
.okbtn {
  z-index: 99999;
  width: 100%;
  margin-top: -15px;
  background-color: #f5f5f5;
  border: 1px solid #cdcdcd;
  height: 70px;
  line-height: 70px;
}

.goBackcss {
  padding-bottom: 20px;
}
.chanmodalg {
  height: 400px;
}
#pickerBoxadd {
position: absolute;
  z-index: 99999;
  top: 0px;
  right: 50px !important;
  height: 290px !important;
  /* width: 300px; */
  overflow: auto;
}
.fontsizTile {
  font-size: 14px;
  color: #f56c6c;
  margin: 10px 0;
  margin-left: 63px;
}
.goodsGroup {
  margin-left: 10px;
}
.item-tag {
  margin-left: -80px;
  width: 495px;
  height: 300px;
  border: 1px solid #eee;
  .tag-item {
    margin: 5px;
  }
}
.item-tag1 {
  margin-left: -80px;
  width: 510px;
  height: 300px;
  overflow: auto;
  border: 1px solid #eee;
  .tag-item {
    margin: 5px;
  }
}
</style>